<template>
  <div class="categoryContainer">
    <div class="categoryMenu">
      <div class="menu-left">
        <div class="menu-left-content">
          <div class="content-btn" v-for="(item,index) in leftNav" :key="item" :class="{active: index === currentIndex}" @click="changeNav(index)">
            <a href="javascript:;">{{item}}</a>
          </div>
        </div>
      </div>
      <div class="menu-right">
        <div class="right-sports">
          <div class="all-sports-contents" v-if="currentIndex === 0">
            <div class="right-sport" v-for="(cate,index) in categoryList" :key="index">
              <img :src="cate.menuThumbnail" alt="">
              <span>{{cate.displayName}}</span>
            </div>
          </div>
          <Common :currentIndex="currentIndex" v-else ></Common>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Common from './common'
export default {
  name: "",
  data() {
    return {
      currentIndex: 0,
      leftNav: ['所有运动','运动服饰','运动鞋袜','运动装备'],
      categoryList: []
    }
  },
  mounted() {
    this.getCategorysList()
  },
  methods: {
    async getCategorysList() {
     let result = await this.$API.reqCategoryList()
     if(result.code === 200) {
       this.categoryList = result.data
     }
    },
    changeNav(index) {
      this.currentIndex = index
    }
  },
  components: {
    Common
  }
};
</script>

<style lang="less" scoped>
.categoryContainer {
  width: 600px;
  height: 929px;
  position: fixed;
  top: 45px;
  left: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  .categoryMenu {
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    .menu-left {
      width: 130px;
      background-color: #f9f9f9;
      position: relative;
      height: 100%;
      &::before {
        content: "";
        width: 1px;
        height: 100%;
        position: absolute;
        display: block;
        right: 0;
        top: 0;
        background-color: #e7e7e7;
      }
      .menu-left-content {
        width: 100%;
        .content-btn {
          width: 100%;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: left;
          color: #232323;
          font-size: 15px;
          cursor: pointer;
          position: relative;
          z-index: 3;
          a {
            padding-left: 20px;
          }
          &.active {
            background-color: #fff;
            font-weight: 700;
            a {
              border-left: 5px solid #0082c3;
              font-weight: 700;
              color: #0082c3;
            }
          }
        }
      }
    }
    .menu-right {
      height: 100%;
      position: absolute;
      left: 130px;
      right: 0;
      bottom: 0;
      top: 0;
      width: auto;
      height: auto;
      overflow: auto;
      border-right: 1px solid #000;
      .right-sports {
        overflow: scroll;
        width: 100%;
        height: 100%;
        .all-sports-contents {
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          .right-sport {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 134px;
            width: 33.33%;
            position: relative;
            img {
              width: 90px;
              height: 90x;
              display: block;
              margin: 0 auto;
            }
            span {
             font-size: 14px;
             color: #5f5f5f;
            }
          }
        }
      }
    }
  }
}
</style>
